<script setup>
import { ref, reactive, getCurrentInstance, onMounted, h, watch, nextTick } from "vue";
import { goRouter } from "@/utils";

import FlvVideo from "@/components/FlvVideo"

const instance = getCurrentInstance();
const _this = instance.appContext.config.globalProperties; //vue3获取当前this

let propsData = defineProps({
  show: {
    type: Boolean,
    required: true
  },
  cameraData: {
    type: Object,
    default: {algorithmList: []}
  }
});
// 组件中使用，接收事件的
// const emits = defineEmits(['iconTypeClick', 'changeTypeArr']);

</script>
<template>
<div class="video_dialog" v-show="show">
  <div class="video_content">
    <!-- <FlvVideo ref="video" :src="videoData.src"></FlvVideo> -->
    <div class="video_dom"></div>
    <div class="alarm_num">
      <div v-for="item in cameraData.algorithmList" :key="item.type" class="alarm_num_item">
        <span><img :src="item.icon" alt=""></span>
        <span>{{ item.num }}</span>
      </div>
    </div>
  </div>
  <div class="op_btn">
    <el-button class="op_btn_Alarms">Router</el-button>
    <!-- <el-button class="op_btn_Alarms">Alarms</el-button> -->
  </div>
</div>
</template>
<style lang="less" scoped>
.video_dialog{
  width: 332px;
  position: absolute;
  right: 43%;
  top: 30px;
  background-color: rgba(17, 58, 114, 0.45);
  .op_btn{
    width: 100%;
    padding: 8px 6px;
    .op_btn_Alarms{
      width: 240px;
      // flex: 1;
    }
    .el-button{
      color: #3AD0FD;
      border-color: #34CAF7;
      background-color: rgba(58, 208, 253, 0.19);
    }
  }
  .video_content{
    display: flex;
    .video_dom{
      width: 270px;
      height: 152px;
      background-color: #fff;
    }
    .alarm_num{
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding-top: 7px;
      .alarm_num_item{
        display: flex;
        align-items: center;
        justify-content: space-evenly;
        font-size: 16px;
        color: #fff;
        span:nth-child(1){
          display: block;
          width: 24px;
          height: 24px;
          background-color: #F44040;
          border-radius: 9999px;
          margin: 0 6px;
          img{
            width: 20px;
            height: 20px;
            margin: 1px 0 0 2px;
          }
        }
        span:nth-child(2){
          display: block;
          flex: 1;
        }
      }
    }
  }
}
</style>